<template>
  <div>

    <!-- table -->
    <div style="background: #fff;">
      <div class="  e-p-20  e-flex e-row-between">
        <div class="e-flex">
          <el-button type="primary" @click="created">创建部门</el-button>
        </div>
      </div>
      <el-table :data="list" stripe style="width: 100%">

        <el-table-column prop="createTime" label="创建时间" width="200">

        </el-table-column>
        <el-table-column prop="departmentName" label="部门名称">
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scop">
            <div style="display: flex;">
              <el-button @click='del(scop.row)' size="mini" type="danger" icon="el-icon-edit">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>


      <createdDepartment ref="departmentChild" @update='update'></createdDepartment>

    </div>
  </div>
</template>

<script>
  import {
    Message,
    MessageBox
  } from 'element-ui';
  import createdDepartment from '../../components/createdDepartment.vue';
  export default {
    components: {
      createdDepartment
    },
    data() {
      return {
        list: [],
        loading: true,

      }
    },
    created() {
      this.jiazai()
    },

    methods: {
      created() {
        this.$refs.departmentChild.dialogVisible = true;
      },
      jiazai() {
        this.axios.post("/user/department", {}).then(res => {
          this.list = res;
          this.loading = false;
        })
      },
      update() {
         location.reload()
      },
      del(item) {
        MessageBox.confirm('此部门将要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post("/user/departmentDel", {
            id: item.id
          }).then(res => {
            Message.success({
              message: "成功",
              onClose: (res) => {
                this.jiazai()
              }
            })
          })
        }).catch(() => {});
      }

    }
  }
</script>

<style scoped>

</style>
